<div class="containerStyle">
  <h3>描述</h3>
  <p>表格排序要结合tiCellText组件和tiHeadSort组件来实现。ti-cell-text包裹的是表头单元格 文本，ti-head-sort为点击的排序图标。</p>
  <p>10.1.14 版本 ti-head-sort 组件初始无序时(默认为null)兼容传入 undefined。</p>
  <p class="demo-text-warn">注意：使用 tiOverflow 组件，请导入 TiOverflowModule。</p>
  <h3>示例</h3>

  <button type="button" (click)="clearSort()" style="margin-right: 20px">手动清除排序状态</button>
  <!-- 10.1.13 版本支持手动改变排序状态-->
  <button type="button" (click)="changeSort()">手动改变排序状态 =》 使 firstName 那一列降序</button>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <table>
      <thead>
        <tr>
          <!--当表头有排序图标或漏斗排序图标，文本title需要显示不下出省略号及tip时需使用ti-cell-text组件；
                        ti-head-sort为排序图标-->
          <th width="{{column.width}}" *ngFor="let column of columns">
            <ti-cell-text>{{column.title}}</ti-cell-text>
            <!-- sort接口为排序的属性名(字段，例如‘firstName’)-->
            <ti-head-sort *ngIf="column.sortKey" [sortKey]="column.sortKey" [asc]="column.asc"></ti-head-sort>
          </th>
        </tr>
      </thead>
      <tbody>
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <tr *ngFor="let row of displayed">
          <td tiOverflow>{{row.firstName}}</td>
          <td tiOverflow>{{row.lastName}}</td>
          <td tiOverflow>{{row.birthday}}</td>
          <td tiOverflow>{{row.balance}}</td>
          <td tiOverflow>{{row.email}}</td>
        </tr>
      </tbody>
    </table>
  </ti-table>
</div>
